<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Blog - Content Manager</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 网站标志 -->
        <div class="logo fl">
            <div class="logo fl">
                黑马程序员 <i>ITHEIMA</i>
            </div>
        </div>
        <!-- /网站标志 -->
        <!-- 用户信息 -->
        <div class="info">
            <div class="profile dropdown fr">
                <span class="btn dropdown-toggle" data-toggle="dropdown">
                    admin
                    <span class="caret"></span>
                </span>
                <ul class="dropdown-menu">
                    <li><a href="user-edit.html">个人资料</a></li>
                    <li><a href="#">退出登录</a></li>
                </ul>
            </div>
        </div>
        <!-- /用户信息 -->
    </div>
    <!-- /头部 -->
    <!-- 主体内容 -->
    <div class="content">
        <!-- 侧边栏 -->
        <div class="aside fl">
            <ul class="menu list-unstyled">
                <li>
                    <a class="item active" href="user.html">
                        <span class="glyphicon glyphicon-user"></span> 用户管理
                    </a>
                </li>
                <li>
                    <a class="item" href="article.html">
                        <span class="glyphicon glyphicon-th-list"></span> 文章管理
                    </a>
                </li>
            </ul>
            <div class="cprt">
                Powered by <a href="http://www.itheima.com/" target="_blank">黑马程序员</a>
            </div>
        </div>
        <!-- 侧边栏 -->
        <div class="main">
            <!-- 分类标题 -->
            <div class="title">
                <h4>5b9a716cb2d2bf17706bcc0a</h4>
            </div>
            <!-- /分类标题 -->
            <form class="form-container">
                <div class="form-group">
                    <label>标题</label>
                    <input type="text" class="form-control" placeholder="请输入文章标题">
                </div>
                <div class="form-group">
                    <label>作者</label>
                    <input type="text" class="form-control" readonly>
                </div>
                <div class="form-group">
                    <label>发布时间</label>
                    <input type="date" class="form-control">
                </div>

                <div class="form-group">
                    <label for="exampleInputFile">文章封面</label>
                    <input type="file" id="file">
                    <div class="thumbnail-waper">
                        <img class="img-thumbnail" src="" id="preview">
                    </div>
                </div>
                <div class="form-group">
                    <label>内容</label>
                    <textarea class="form-control" id="editor"></textarea>
                </div>
                <div class="buttons">
                    <input type="submit" class="btn btn-primary">
                </div>
            </form>

        </div>
    </div>
    <!-- /主体内容 -->
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/ckeditor5/ckeditor.js"></script>
    <script type="text/javascript">
        let editor;

        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(newEditor => {
                editor = newEditor;
            })
            .catch(error => {
                console.error(error);
            });
        var file = document.querySelector('#file')

        file.onclick = function() {
                alert('hao')
            }
            // 获取数据
            // const editorData = editor.getData();
    </script>
</body>

</html>